import React from 'react'
import { Text, View, Image, } from '@tarojs/components'
import Taro from '@tarojs/taro'

type Props = {
    data: string[],
    width?: string,
    style?: React.CSSProperties,
    itemStyle?: React.CSSProperties,
    /**外边距 */
    spacingHorizontal?: string,
    /**内边距 */
    spacingInner?: string
}


export default (props: Props) => {
    const {
        spacingHorizontal = '15px',
        data = [],
        spacingInner = '8px',
    } = props


    // const [state, dispatch] = React.useReducer((state, action) => ({ ...state, ...action }), {})


    React.useEffect(() => {

    }, [])


    let Sidelength = `calc((100vw - ${spacingHorizontal}  * 2 - ${spacingInner}  * 2) / 3)`
    if (props.width) {
        Sidelength = `calc((${props.width} -  ${spacingHorizontal}  * 2 -  ${spacingInner}  * 2) / 3)`
    }


    const show = (index: number) => {
        Taro.previewImage({
            urls: data,
            current: data[index]
        })
    }

    return (
        <View style={{ ...styles.container, ...props.style, ...{ width: props.width }, }}>
            {
                data.map((i, idx) => {

                    return (
                        <View key={`sg-muti-picture-${idx}`} style={{
                            ...styles.item_container,
                            ...props.itemStyle,
                            marginTop: idx < 3 ? 0 : spacingInner, marginLeft: idx % 3 == 0 ? spacingHorizontal : spacingInner,
                            width: Sidelength, height: Sidelength,
                        }}>
                            <Image
                                style={{ width: '100%', height: '100%', }}
                                mode='aspectFill'
                                onClick={e => {
                                    e.stopPropagation()
                                    show(idx)
                                }}
                                src={i}
                            />
                        </View>
                    )
                })
            }
            {/* {hasPictureViewer && <PictureViewer bind={{ viewModel, setViewModel }} />} */}

        </View>
    )
}

const styles: Record<string, React.CSSProperties> = {
    container: {
        width: '100%',
        display: 'flex',
        flexDirection: 'row',
        flexWrap: 'wrap',

        // height: '500px',
        // backgroundColor: 'purple'
    },
    item_container: {
        backgroundColor: '#F3F3F3',
        display: 'flex',
        position: 'relative',
        borderRadius: '8px',
        overflow: 'hidden'
    },

}



